<template>
  <div class="integral_list">
    <c-title :hide="false" :text="titlePage"></c-title>
    <div class="detail">
      <template v-if="$route.params.type == 'v_point'">
        <div class="line">
          <div class="line_t">{{ topStatistic.sub_value }}</div>
          <div class="line_b">可用{{ topStatistic.type_desc }}</div>
        </div>
        <div class="line">
          <div class="line_t">{{ topStatistic.value }}</div>
          <div class="line_b">已用{{ topStatistic.type_desc }}</div>
        </div>
      </template>
      <template v-if="$route.params.type == 'cloud_point'">
        <div class="line">
          <div class="line_t">{{ topStatistic.total_value }}</div>
          <div class="line_b">{{ topStatistic.type_desc }}总收入</div>
        </div>
        <div class="line">
          <div class="line_t">{{ topStatistic.sub_value }}</div>
          <div class="line_b">待释放{{ topStatistic.type_desc }}</div>
        </div>
        <div class="line">
          <div class="line_t">{{ topStatistic.value }}</div>
          <div class="line_b">已释放{{ topStatistic.type_desc }}</div>
        </div>
      </template>
      <template v-if="$route.params.type == 'today_dividend'">
        <div class="line">
          <div class="line_t">{{ count_total }}</div>
          <div class="line_b">今日分红</div>
        </div>
      </template>
      <template v-if="$route.params.type == 'middleground'">
        <div class="line">
          <div class="line_t">{{ count_total }}</div>
          <div class="line_b">中台基金</div>
        </div>
      </template>
      <template v-if="$route.params.type == 'total_dividend'">
        <div class="line">
          <div class="line_t">{{ count_total }}</div>
          <div class="line_b">分红总份数</div>
        </div>
      </template>
    </div>
    <van-tabs @change="tabChange" v-model="active" background="#F5F5F5" line-width="15" title-active-color="#F15353" v-if="$route.params.type != 'total_dividend'">
      <van-tab title="收入" title-style="font-weight: bold;font-size: 0.94rem;"></van-tab>
      <van-tab title="支出" title-style="font-weight: bold;font-size: 0.94rem;" v-if="$route.params.type == 'v_point'"></van-tab>
    </van-tabs>
    <div v-else style="margin: 0.84rem 0;font-weight: bold;font-size: 0.94rem;">{{ nowTimeDate }}详情</div>
    <div class="list">
      <template v-if="$route.params.type != 'total_dividend'">
        <template v-if="active == 0">
          <div class="lis" v-for="(item, index) in list" :key="index">
            <div class="lis_l">
              <div class="lis_l_t" v-if="$route.params.type == 'today_dividend'">分红总额：{{ item.price }}</div>
              <div class="lis_l_t" v-else-if="$route.params.type == 'middleground'">总收入：{{ item.total_value }}</div>
              <div class="lis_l_t" v-else>总收入：{{ item.total_point }}</div>

              <div class="lis_l_b" v-if="$route.params.type == 'cloud_point'">{{ item.order_time }}</div>
              <div class="lis_l_b" v-else-if="$route.params.type == 'today_dividend'">{{ item.dividend_time }}</div>
              <div class="lis_l_b" v-else-if="$route.params.type == 'middleground'">{{ item.settle_time }}</div>
              <div class="lis_l_b" v-else>{{ item.dividend_date }}</div>
            </div>
            <div class="lis_r" @click="showDetailPopup(item)">查看详情<van-icon name="arrow" color="#AAAAB3" /></div>
          </div>
        </template>
        <template v-if="active == 1 && $route.params.type == 'v_point'">
          <div class="lis lis_start" v-for="(item, index) in list" :key="index">
            <div class="lis_l">
              <div class="lis_l_t">{{ item.remark }}</div>
              <div class="lis_l_b">{{ item.created_at }}</div>
            </div>
            <div class="lis_r lis_r_s">{{ item.change_points }}</div>
          </div>
        </template>
      </template>
      <template v-else>
        <div class="lis lis_start" v-for="(item, index) in list" :key="index">
          <div class="lis_l">
            <div class="lis_l_t">{{ item.name }}</div>
          </div>
          <div class="lis_r lis_r_s">+{{ item.count }}</div>
        </div>
      </template>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '29.81rem' }" round>
      <van-nav-bar>
        <template #title>
          <span style="font-weight: bold;font-size: 1rem;" v-if="detail_list.length > 0 && detail_list[0].date && $route.params.type != 'middleground'">{{ detail_list[0].date.slice(0, 10) }}详情</span>
          <span style="font-weight: bold;font-size: 1rem;" v-if="detail_list.length > 0 && detail_list[0].settle_time && $route.params.type == 'middleground'">{{ detail_list[0].settle_time.slice(0, 10) }}详情</span>
        </template>
        <template #right>
          <div class="circle" @click="show = false">
            <van-icon name="cross" color="#6E6E79" />
          </div>
        </template>
      </van-nav-bar>

      <div style="margin-top: 1rem;"></div>
      <div class="detailList" v-for="(item, index) in detail_list" :key="index">
        <div class="detailList_l" v-if="$route.params.type == 'cloud_point'">{{ item.pool_name }}{{ item.type == 1 ? "直推获得" : "" }}</div>
        <div class="detailList_l" v-if="$route.params.type == 'v_point'">{{ item.pool_name }}</div>
        <div class="detailList_l" v-if="$route.params.type == 'today_dividend'">{{ item.name }}</div>
        <div class="detailList_l" v-if="$route.params.type == 'middleground'">{{ item.pool_name }}</div>
        <div class="detailList_r">+{{ item.value }}</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: 0,
      titlePage: "",
      show: false,
      urlstr: "",
      detail_Url: "",
      detail_json: {},
      detail_list: [],
      list: [],
      topType: 1,
      topStatistic: {},
      count_total: 0, //总分红份数
      nowTimeDate: "",

      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  async activated() {
    if (this.$route.params.type == "v_point") {
      await this.getTopStatic();
      this.fun.setWXTitle(`我的${this.topStatistic.type_desc}`);
      this.titlePage = `我的${this.topStatistic.type_desc}`;
      this.urlstr = "plugin.project-party.frontend.controllers.index.vPoint";
      this.detail_Url = "plugin.project-party.frontend.controllers.index.vPointDetail";
      this.detail_json = {
        dividend_code: ""
      };
    } else if (this.$route.params.type == "cloud_point") {
      await this.getTopStatic();
      this.fun.setWXTitle(`我的${this.topStatistic.type_desc}`);
      this.titlePage = `我的${this.topStatistic.type_desc}`;
      this.urlstr = "plugin.project-party.frontend.controllers.index.inventPointList";
      this.detail_Url = "plugin.project-party.frontend.controllers.index.inventPointDetail";
      this.detail_json = {
        order_time: ""
      };
    } else if (this.$route.params.type == "total_dividend") {
      this.fun.setWXTitle("总分红份数");
      this.titlePage = "总分红份数";
      this.urlstr = "plugin.project-party.frontend.controllers.index.memberDividendCount";
      this.nowTimeDate = this.fun.timestampToTime(Date.parse(new Date()) / 1000).replace(/\./g, "-");
      this.nowTimeDate = this.nowTimeDate.slice(0, 10);
    } else if (this.$route.params.type == "middleground") {
      this.fun.setWXTitle("中台基金");
      this.titlePage = "中台基金";
      this.urlstr = "plugin.project-party.frontend.controllers.index.fundList";
      this.detail_Url = "plugin.project-party.frontend.controllers.index.fundDetail";
      this.detail_json = {
        settle_time: ""
      };
    } else if (this.$route.params.type == "today_dividend") {
      this.fun.setWXTitle("今日分红");
      this.titlePage = "今日分红";
      this.urlstr = "plugin.project-party.frontend.controllers.index.bonusLog";
      this.detail_Url = "plugin.project-party.frontend.controllers.index.bonusLogDetail";
      this.detail_json = {
        id: ""
      };
    }
    this.getData();
  },
  methods: {
    tabChange() {
      if (this.$route.params.type == "v_point") {
        this.list = [];
        this.page = 1;
        this.total_page = 0;
        this.isLoadMore = true;
        if (this.active == 1) {
          this.urlstr = "plugin.project-party.frontend.controllers.index.vPointExpend";
        } else {
          this.urlstr = "plugin.project-party.frontend.controllers.index.vPoint";
        }
        this.getData();
      }
    },
    async getTopStatic() {
      switch (this.$route.params.type) {
        case "v_point":
          this.topType = 4;
          break;
        case "cloud_point":
          this.topType = 3;
          break;
        default:
          this.topType = 4;
          break;
      }
      let { data, msg, result } = await $http.post("plugin.project-party.frontend.controllers.index.topStatistic", { point_type: this.topType }, "");
      if (result) {
        this.topStatistic = data;
      } else {
        this.$toast(msg);
      }
    },
    async showDetailPopup(item) {
      this.show = true;
      if (this.$route.params.type == "v_point") {
        this.detail_json.dividend_code = item.dividend_code;
        this.getDetail();
      } else if (this.$route.params.type == "today_dividend") {
        this.detail_json.id = item.dividend_id;
        this.getDetail();
      } else if (this.$route.params.type == "middleground") {
        console.log(item);
        this.detail_json.settle_time = item.settle_time;
        this.getDetail();
      } else {
        this.detail_json.order_time = item.order_time;
        this.getDetail();
      }
    },
    async getDetail() {
      let { data, msg, result } = await $http.post(this.detail_Url, this.detail_json, "");
      if (result) {
        this.detail_list = data.data;
        console.log(data.data)
      } else {
        this.$toast(msg);
      }
    },
    async getData() {
      let { data, msg, result } = await $http.post(this.urlstr, {}, "");
      if (result) {
        if (this.$route.params.type == "total_dividend") {
          this.list = data.data.count_statistic_list;
          this.count_total = data.data.dividend_count_total;
          this.total_page = 0;
          this.isLoadMore = false;
          return;
        }
        if (this.$route.params.type == "middleground") {
          this.count_total = data.dividend_value;
        }
        if (this.$route.params.type == "today_dividend") {
          this.count_total = data.dividend_price;
        }
        this.list = data.data;
        this.total_page = data.pages;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let { data, msg, result } = await $http.post(this.urlstr, { page: this.page }, "");
        if (result) {
          this.isLoadMore = true;
          this.list = this.list.concat(data.data);
        } else {
          this.$toast(msg);
          this.isLoadMore = false;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.detailList {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.94rem;
  margin-bottom: 1.25rem;
  .detailList_l {
    font-weight: 500;
    font-size: 0.88rem;
  }
  .detailList_r {
    font-weight: 500;
    font-size: 0.88rem;
    color: #f15353;
  }
}
.circle {
  width: 1.5rem;
  height: 1.5rem;
  background: #f0f0f1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.list {
  padding: 0.47rem 0.75rem 2rem 0.75rem;
  box-sizing: border-box;
  .lis {
    padding: 1rem 0.75rem;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.63rem;
    .lis_l {
      flex: 1;
      flex-direction: column;
      align-items: flex-start;
      .lis_l_t {
        font-weight: bold;
        font-size: 0.81rem;
        text-align: left;
        line-height: 0.9rem;
        margin-bottom: 0.53rem;
      }
      .lis_l_b {
        font-size: 0.81rem;
        line-height: 0.9rem;
        text-align: left;
        color: #6e6e79;
      }
    }
    .lis_r {
      flex-shrink: 0;
      font-size: 0.81rem;
      color: #6e6e79;
    }
    .lis_r_s {
      font-weight: 500;
      font-size: 0.88rem;
      color: #f15353;
    }
  }
  .lis_start {
    align-items: flex-start !important;
  }
}
.detail {
  display: flex;
  justify-content: space-between;
  background: #f15353;
  height: 5.25rem;
  .line {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    .line_t {
      font-size: 1.13rem;
      line-height: 1.13rem;
      font-weight: bold;
      margin-bottom: 0.53rem;
    }
    .line_b {
      font-size: 0.75rem;
    }
  }
}
</style>
